<template>
  <n-page-header class="page-header">
    <template #title>
      <a :href="redirect_uri" style="margin-left: 10px">网址导航</a>
    </template>
    <template #extra>
      <el-menu mode="horizontal" @select="handleSelect" class="head-menu">
        <n-menu
          mode="horizontal"
          :options="options"
          responsive
          v-model:value="menuValue"
          @update:value="handleSelect"
        />
        <el-sub-menu index="2">
          <template #title>打不开了，等一下</template>
          <el-menu-item index="gltf">gltf查看器</el-menu-item>
          <el-sub-menu index="2-4">
            <template #title>小游戏</template>
            <el-menu-item index="2-4-1">扫雷</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
      </el-menu>
    </template>
  </n-page-header>

  <n-drawer v-model:show="showSet" :width="256">
    <n-drawer-content title="设置">
      <n-list>
        <n-list-item>
          <span style="margin-right: 10px">显示搜索:</span>
          <el-switch v-model="showsearch" />
        </n-list-item>
        <n-list-item>
          <a :href="gistsUrl">网址配置</a>
        </n-list-item>
      </n-list>
    </n-drawer-content>
  </n-drawer>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useStorage } from '@vueuse/core'
import { redirect_uri } from '@/assets/giteeConfig'
import { options } from './menu'
import { useUser } from '@/stores/user'
import { dataId } from '@/utils/api'

const userStore = useUser()
userStore.getUserInfo()
const gistsUrl = computed(() => {
  const gists_url = userStore.user.html_url + '/codes/' + dataId
  return gists_url
})

const menuValue = ref('')
const showSet = ref(false)
const showsearch = useStorage('showsearch', true)

function handleSelect(key: string) {
  const url = {
    gltf: 'https://greenboy0526.gitee.io/3d-viewer',
    '2-4-1': 'http://greenboy0526.gitee.io/minesweeper/',
  }[key]
  if (url) {
    location.href = url
    return
  }

  const cbMap: Record<string, () => void> = {
    set: () => {
      showSet.value = true
    },
  }
  if (cbMap[key]) {
    cbMap[key]()
  }
  menuValue.value = ''
}
</script>
<style scoped lang="scss">
.page-header {
  border-bottom: 1px solid rgb(239, 239, 245);
}
.head-menu {
  border: none;
  max-width: 60vw;
  align-items: center;
}
</style>
